<script setup>
import {onMounted, ref} from "vue";

import * as echarts from "echarts";
import {useUserStore} from '@/stores/index.js'
import {getStarLevelService} from "@/api/modules/comment.js";
import {getCustomerCountService} from "@/api/modules/customer.js";
import {getMoneyCurrentMonthService, getMoneyLatest10MonthService, getOrderCountService} from "@/api/modules/order.js";

const userStore = useUserStore()
const level = ref({
  bad: 0,
  medium: 0,
  good: 0
})

const customerCount = ref(0)
const orderCount = ref({
  count: 0,
  finished: 0,
  unFinished: 0
})
const moneyCurrentMonth = ref(0)
const tenMonthMoney = ref({})
const getStarLevel = async () => {
  return await getStarLevelService()
}

const initCommentChart = () => {
  const myChart = echarts.init(document.getElementById("level-chart"))
  myChart.setOption({
    title: {
      text: '用户反馈'
    },
    tooltip: {
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: '评论数',
        type: 'pie',
        data: [
          {
            value: level.value.bad,
            name: '差评'
          },
          {
            value: level.value.medium,
            name: '中评'
          },
          {
            value: level.value.good,
            name: '好评'
          }
        ]
      },
    ]
  })
}

const initMoneyLatest10MonthChart = () => {
  const myChart = echarts.init(document.getElementById("tenMonthMoney"))
  myChart.setOption({
    title: {
      text: "近10月流水"
    },
    tooltip: {
      formatter: "{c}元",
    },
    xAxis: {
      name: "月份",
      data: tenMonthMoney.value.monthList
    },
    yAxis: {
      name: "金额(元)"
    },
    series: [
      {
        type: 'bar',
        data: tenMonthMoney.value.moneyList
      }
    ]
  })
}
const getCustomerCount = async () => {
  customerCount.value = await getCustomerCountService()
}

const getOrderCount = async () => {
  orderCount.value = await getOrderCountService()
}

const getMoneyCurrentMonth = async () => {
  const date = new Date();
  const data = {year: date.getFullYear(), month: date.getMonth() + 1}
  moneyCurrentMonth.value = await getMoneyCurrentMonthService(data)
}


const getMoneyLatest10Month = async () => {
  const date = new Date();
  const data = {year: date.getFullYear(), month: date.getMonth() + 1}
  tenMonthMoney.value = await getMoneyLatest10MonthService(data)
}
onMounted(async () => {
  level.value = await getStarLevel()
  // initCommentChart()
  await getCustomerCount()
  await getOrderCount()
  await getMoneyCurrentMonth()
  await getMoneyLatest10Month()
  initMoneyLatest10MonthChart()
})
</script>

<template>
  <div class="main">
    <el-card class="login-user">
      <div class="info">欢迎：{{ userStore.userInfo.nickname }}</div>
    </el-card>
    <div class="header" style="display: flex">
      <el-card>
        <div style="display: flex;justify-content: space-between">
          <div class="left">
            <span class="iconfont icon-kehu" style="font-size: 50px"></span>
          </div>
          <div class="right" style="display: flex;flex-direction: column;justify-content: space-between">
            <div class="customer">客户量</div>
            <div>{{ customerCount }}</div>
          </div>
        </div>
      </el-card>
      <el-card>
        <div style="display: flex;justify-content: space-between">
          <div class="left">
            <span class="iconfont icon-dingdan" style="font-size: 50px"></span>
          </div>
          <div class="right" style="display: flex;flex-direction: column;justify-content: space-between">
            <div class="customer" style="margin: 3px">总订单数 {{ orderCount.count }}</div>
            <div class="customer" style="margin: 3px;color: lawngreen">已完成 {{ orderCount.finished }}</div>
            <div class="customer" style="margin: 3px;color: red">未完成 {{ orderCount.unFinished }}</div>
          </div>
        </div>
      </el-card>
      <el-card>
        <div style="display: flex;justify-content: space-between">
          <div class="left">
            <span class="iconfont icon-jiaoyiliushui" style="font-size: 50px"></span>
          </div>
          <div class="right" style="display: flex;flex-direction: column;justify-content: space-between">
            <div class="customer">本月流水(元)</div>
            <div>{{ moneyCurrentMonth }}</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="chart">
<!--      <div id="level-chart"></div>-->
      <div id="tenMonthMoney"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
#level-chart {
  height: 200px;
  width: 200px;
}

#tenMonthMoney {
  height: 300px;
  width: 550px;
}

.main {
  height: 100%;

  .login-user {
    margin-bottom: 5px;
    height: 55px;

    .info {
      font-weight: 700;
      font-size: 20px;
    }
  }

  .header {
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .el-card {
      width: 30%;
      height: 110px;
    }
  }

  .chart {
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}
</style>
